<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1>new-king</h1>
    <input type="text" placeholder="尊姓大名"  id="myInput"/>
    <script>
       const data = document.getElementsByTagName('h1')[0];
       //定义源对象

       const obj = { name : 'new-king'  }
       //const myInputs = document.querySelector('#myInput')
       myInput.addEventListener("keyup",(event) => {
           proxy.name = myInput.value;
           data.innerHTML = obj.name;
       })
      
       //创建一个代理对象
       const proxy = new Proxy(obj,{
          //拦截对代理对象的访问操作
          get(target,key){
            //访问代理对象属性时，会执行get
            return target[key]
          },
          set(target,key,value){
            //设置代理对象属性时，会执行set
            target[key] = value;
            return true;
          }
       })
       
      
       
   </script>
  </body>
</html>